<template>
  <div class="home-center">
    <div class="home-view">
      <img src="@/assets/logo.png" alt="App Logo" class="logo" style="width: 150px;">
      <h1>PVAX</h1>
      <p>
        基于Pywebview（P）、Vue（V）打造的Application（A）,创建无限可能（X）
      </p>
      <p class="m-tb-20">现代化跨平台开发，基于Python、Vue(任意一种前端框架)构建Windows、Linux、Macos客户端程序。</p>
      <n-button type="primary" @click="getDeviceInfo">
        获取设备信息
      </n-button>
      <n-grid x-gap="12" :cols="3" class="m-t-20">
        <n-gi>
          <n-card title="用户名" size="medium">
            当前设备用户：{{ devicesinfo.current_user }}
          </n-card>
        </n-gi>
        <n-gi>
          <n-card title="内存" size="medium">
            当前设备内存：{{ devicesinfo.memory }}
          </n-card>
        </n-gi>
        <n-gi>
          <n-card title="磁盘" size="medium">
            当前设备磁盘：{{ devicesinfo.disk }}
          </n-card>
        </n-gi>
      </n-grid>
      <n-grid x-gap="12" :cols="3" class="m-t-20">
        <n-gi>
          <n-card title="windows系统" size="medium">
            Windows7及以上系统（exe）
          </n-card>
        </n-gi>
        <n-gi>
          <n-card title="Linux系统" size="medium">
            ubuntu/debian系（deb）<span style="color: red;">start超50完善</span>
          </n-card>
        </n-gi>
        <n-gi>
          <n-card title="Mac系统" size="medium">
            MacOS系统（dmg）<span style="color: red;">start超100完善</span>
          </n-card>
        </n-gi>
      </n-grid>
    </div>
  </div>
</template>
<script setup lang="ts">
defineOptions({
  name: "home-content"
});
import { reactive } from 'vue'
import { useMessage } from 'naive-ui'
const message = useMessage()
const devicesinfo = reactive({
  current_user: '待获取',
  memory: '待获取',
  disk: '待获取'
})
function getDeviceInfo() {
  window.pywebview.api.get_device_info().then((res) => {
    message.success('获取成功')
    devicesinfo.current_user = res.current_user
    devicesinfo.memory = res.memory
    devicesinfo.disk = res.disk
  })
}
</script>
<style>
.home-center {
  display: flex;
  /* 激活 flex 布局 */
  flex-direction: column;
  /* 主轴垂直 */
  justify-content: center;
  /* 垂直居中 */
  height: 100%;
}

.home-view {
  text-align: center;

  .m-tb-20 {
    margin: 20px 0;
  }

  .m-t-20 {
    margin-top: 20px;
  }
}
</style>